<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- <link href="./css/homepage.css/headerPart.css" rel="stylesheet"> -->
    <script src="./js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <header>
        <div class="header-container">
            <div class="header-title">
                <div class="header-logo">
                     <!-- <img class="header-logo-pic" src="./images/lg-img/WechatIMG15.jpeg"> -->
                </div>
                <div class="header-title-box">
                    <span class="header-title-word">中控服务开放平台</span>
                </div>
                
            </div>
            <div class="header-menu">
                <ul class="header-menu-ul">
                    <li class="header-menu-li" v-for="(item, index) in nav" :key="index"><a href="#">{{item.title}}</a>
                        <ul class="menu-child">
                            <li v-for="(it, index) in item.subnav" :key="index"><a href="#">{{it.value}}</a></li>                           
                        </ul>
                    </li>                   
                </ul>
            </div>
            <div class="header-user">
                    <div class="header-btn">
                        <span><a href="#">登录</a></span>
                        <span><a href="#">注册</a></span>
                    </div>
            </div>
        </div> 
    </header>  
    <script>      
        var myapp = new Vue({
            el:".header-menu",
            data:{
                nav:[ 
                    {
                        title:"服务商城",url:"",subnav:[
                            {value:"故宫问答",url:""},
                            {value:"猜数字",url:""},
                            {value:"闲聊",url:""}
                        ]
                    },
                    {
                        title:"解决方案",url:"",subnav:[
                            {value:"解决方案1",url:""},
                            {value:"解决方案2",url:""},
                            {value:"解决方案3",url:""}
                        ]
                    },
                    {
                        title:"应用创建",url:"",subnav:[
                            {value:"应用创建1",url:""},
                            {value:"应用创建2",url:""},
                            {value:"应用创建3",url:""}
                        ]
                    },
                    {
                        title:"帮助中心",url:"",subnav:[                           
                        ]
                    }
                ]
            }
        })
    </script>
</body>
</html>